﻿@model MvcCmsProjectTracker.ViewModels.ProjectEditViewModel
@section HtmlHead{
}
<h2>
    Edit Project</h2>
<div style="position: relative;">
    <form id="form1" method="post" action="">
    @Html.Partial("ControlsProjectTracker/Message", Model)
    <fieldset>
        <legend>Fields</legend>
        <div style="float: left; width: 500px">
            <div class="editor-label">
                @Html.LabelFor(model => model.Project.Name)
            </div>
            <div class="editor-field">
                @Html.TextBox("Name", Model.Project.Name)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Project.IsForHelpDesk)
            </div>
            <div class="editor-field">
                @Html.CheckBox("IsForHelpDesk", Model.Project.IsForHelpDesk)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Project.Description)
            </div>
            <div class="editor-field">
                @Html.TextArea("Description", Model.Project.Description, new { style = "width:400px", rows = "4" })
            </div>
            <p>
                <input type="submit" value="Save" />
            </p>
        </div>
        <div style="float: left">
            <div class="editor-label">
                @Html.LabelFor(model => model.Project.CreatorName)
            </div>
            <div class="editor-field">
                @Model.Project.CreatorName
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Project.DateCreated)
            </div>
            <div class="editor-field">
                @String.Format("{0:g}", Model.Project.DateCreated)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Project.LastUpdate)
            </div>
            <div class="editor-field">
                @String.Format("{0:g}", Model.Project.LastUpdate)
            </div>
        </div>
        <div class="clear">
        </div>
    </fieldset>
    </form>
</div>
<div class="tab-container">
    <div id="tabs">
        <ul>
        @if (!Model.Project.IsForHelpDesk)
        {
            <li><a href="#tabs-1">Milestones</a></li>
            <li><a href="#tabs-2">Categories</a></li>
        }
            <li><a href="#tabs-3">Priorities</a></li>
            <li><a href="#tabs-4">Statuses</a></li>
            @*<li><a href="#tabs-5">Custom Fields</a></li>*@
            <li><a href="#tabs-6">Members</a></li>
        </ul>
        @if (!Model.Project.IsForHelpDesk)
        {
        <div id="tabs-1">
            @Html.Partial("ProjectMilestones", Model.ProjectMilestoneViewModel)
        </div>
        <div id="tabs-2">
            @Html.Partial("ProjectCategories", Model.ProjectCategoryViewModel)
        </div>
        }
        <div id="tabs-3">
            @Html.Partial("ProjectPriorities", Model.ProjectPriorityViewModel)
        </div>
        <div id="tabs-4">
            @Html.Partial("ProjectStatuses", Model.ProjectStatusViewModel)
        </div>
@*        <div id="tabs-5">
            @Html.Partial("ProjectCustomFields", Model.ProjectCustomFieldViewModel)
        </div>*@        
        <div id="tabs-6">
            @Html.Partial("ProjectMembers", Model.ProjectMemberViewModel)
        </div>
    </div>
</div>
<br />
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section ScriptContent{
    <script src="@Url.Content("/areas/mvccmsprojecttracker/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script id="Validation" type="text/javascript">
        $("#form1").validate({
            rules: {
                Name: { required: true },
                Description: { required: true }
            },
            messages: {
                Name: "Name Required",
                Description: "Description Required"
            },
            errorElement: "div",
            wrapper: "div",  // a wrapper around the error message
            errorPlacement: function (error, element) {
                offset = element.offset();
                error.insertAfter(element)
                error.addClass('message');
                error.css('position', 'absolute');
                error.css('width', 190);
                error.css('left', 220);
                error.css('top', 0);
                var elementName = $(element).attr("name");
                switch (elementName) {
                    case "Name":
                        error.css('top', 60);
                        break;
                    case "Description":
                        error.css('top', 110);
                        break;
                }
            }
        });
    </script>
    <script id="General" type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
    </script>
}
